import { useRef, useState } from 'react'
import styles from './proess.module.less'
import { PlayCircleFilled, PauseCircleFilled } from '@ant-design/icons'
import React from 'react'
import { DatePicker, Form } from 'antd'
import type { RangePickerProps } from 'antd/es/date-picker'
import moment from 'moment'
import { useSelector } from 'react-redux'
import { IStore } from '@/redux/reduxType'

export default function Proess() {
  // 存储开始日期

  const state = useSelector((state: IStore) => state)
  // const state = useSelector((state) => state)

  const { RangePicker } = DatePicker
  // 设置动画蓝条宽度
  const [width, setWidth] = useState('0px')
  // 动态生成图标 true 播放 false 停止
  const [start, setStart] = useState<boolean>(false)
  const proess: React.MutableRefObject<any> = useRef(null)

  const onStop = () => {
    setStart(false)
    setWidth(proess.current.clientWidth + 'px')
  }
  const onStart = () => {
    setStart(true)
  }

  // 禁用
  const disabledDate: RangePickerProps['disabledDate'] = (current) => {
    return current && current < moment().endOf('day') && current < moment().subtract(90, 'day')
  }
  return (
    <div id={styles.proess}>
      <p>Proess</p>
      <div className={'proessLayout'}>
        <div className={'prs'}>
          <div ref={proess} style={{ width: start ? '100%' : width, transition: 'all 60s', background: '#3399cc' }}></div>
          <div className={'prsborder'}></div>
          {React.createElement(start ? PauseCircleFilled : PlayCircleFilled, {
            onClick: start ? onStop : onStart,
            className: 'proess-button',
          })}
        </div>
      </div>
      <div className={'1'} style={{ marginTop: '100px' }}>
        <Form
          onFinish={(values) => {
            console.log(values)
          }}
        >
          <Form.Item label={'日期'}>
            <RangePicker
              disabledDate={disabledDate}
              onCalendarChange={(dates, dateString, c) => {
                console.log(dates, dateString, c)
              }}
            />
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}
